﻿@{
    ViewBag.Title = "DataBindListItemsAsTable";
}

<h2>Data Bind List Items As Table</h2>

<h3>Sample</h3>

@{
    Html.Telerik().DropDownList()
        .Name("dropdownlist")
        .HtmlAttributes( new { style = "width:300px" })
        .ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
        .Render();
}
<br />
<br />
onSelect returned: @Html.TextBox("results", "", new { style = "width:300px;background: buttonface;", @readonly = "readonly" })

<h3>Documentation</h3>
<p>
The DropDownList implements the OnLoad client event.  In the onLoad event handler, the dropdownlist.dataBindAsTable() function
is called to bind the dropdownlist as a table.
</p>

<script type="text/javascript">
    var telerikProducts=[
                { Id: 1,Product: 'ASP.NET AJAX',Category: 'Developer Tools',SubCategory: 'Web UI Controls & Components' },
                { Id: 2,Product: 'ASP.NET MVC',Category: 'Developer Tools',SubCategory: 'Web UI Controls & Components' },
                { Id: 3,Product: 'Silverlight',Category: 'Developer Tools',SubCategory: 'Web UI Controls & Components' },
                { Id: 4,Product: 'WPF',Category: 'Developer Tools',SubCategory: 'Desktop UI Controls & Components' },
                { Id: 5,Product: 'Windows Forms',Category: 'Developer Tools',SubCategory: 'Desktop UI Controls & Components' },
                { Id: 6,Product: 'Windows Phone',Category: 'Developer Tools',SubCategory: 'Mobile UI Controls & Components' },
                { Id: 7,Product: 'Telerik Reporting',Category: 'Developer Tools',SubCategory: 'Report Designer and Viewer' },
                { Id: 8,Product: 'OpenAccess ORM',Category: 'Developer Tools',SubCategory: 'Data Access' },
                { Id: 9,Product: 'Just Code',Category: 'Developer Tools',SubCategory: 'Productivity Tools' },
                { Id: 10,Product: 'Just Mock',Category: 'Developer Tools',SubCategory: 'Productivity Tools' },
                { Id: 11,Product: 'Just Trace',Category: 'Developer Tools',SubCategory: 'Productivity Tools' },
                { Id: 12,Product: 'Just Decompile',Category: 'Developer Tools',SubCategory: 'Productivity Tools' },
                { Id: 13,Product: 'TeamPulse',Category: 'Agile Project Management',SubCategory: '' },
                { Id: 14,Product: 'Test Studio',Category: 'Software Testing Tools',SubCategory: '' },
                { Id: 15,Product: 'Testing Framework',Category: 'Software Testing Tools',SubCategory: '' },
                { Id: 16,Product: 'Sitefinity ASP.NET CMS',Category: 'Web Content Management',SubCategory: '' },
                { Id: 17,Product: 'Add-ons Marketplace',Category: 'Web Content Management',SubCategory: '' },
                { Id: 18,Product: 'SharePoint Acceleration Kit',Category: 'SharePoint',SubCategory: '' },
                { Id: 19,Product: 'Telerik Minifier',Category: 'Free Tools',SubCategory: '' },
                { Id: 20,Product: 'Code Converter',Category: 'Free Tools',SubCategory: '' },
                { Id: 21,Product: 'Razor Converter',Category: 'Free Tools',SubCategory: '' },
                { Id: 22,Product: 'Visual Style Builder',Category: 'Free Tools',SubCategory: '' },
                { Id: 23,Product: 'Template Builder',Category: 'Free Tools',SubCategory: '' }
            ];

    dropdownlist_onLoad=function (e) {
        var dropdownlist=$('#dropdownlist').data('tDropDownList');

        dropdownlist.dataBindAsTable({
            data: telerikProducts,
            displayFields: [{
                fieldName: "Product",
                style: "font-weight:bold"
            },{
                fieldName: "Category"
            },{
                fieldName: "SubCategory",
                style: "color:Red;"
            }],
            separator: { visible: false },
            selectedField: "Product",
            valueField: "Id",
            initialValue: 2,
            onSelect: function (e) {
                $('#results').val("e.value="+e.value+", e.text='"+e.text+"'");
            }
        });
    }

</script>